<template>
  <div id="client-list">
    <div class="fixed-tabbar">
      <div class="dealtab">
        <div class="select-down" @click="downfirst">
          {{dealloan}}
          <x-icon type="ios-arrow-up" size="20" v-show="show01"></x-icon>
          <x-icon type="ios-arrow-down" size="20" v-show="!show01"></x-icon>
        </div>
        <div class="select-down" @click="downsecond">
          {{loantime}}
          <x-icon type="ios-arrow-up" size="20" v-show="show02"></x-icon>
          <x-icon type="ios-arrow-down" size="20" v-show="!show02"></x-icon>
        </div>
        <div class="select-down" @click="downthird">
          {{changetimes}}
          <x-icon type="ios-arrow-up" size="20" v-show="show03"></x-icon>
          <x-icon type="ios-arrow-down" size="20" v-show="!show03"></x-icon>
        </div>
        <div class="select-down" @click="downfour">
          {{publishtime}}
          <x-icon type="ios-arrow-up" size="20" v-show="show04"></x-icon>
          <x-icon type="ios-arrow-down" size="20" v-show="!show04"></x-icon>
        </div>
        <div class="clear"></div>
        <div class="client-checker" v-show="show03">
          <checker
            v-model="demo1"
            default-item-class="demo1-item"
            selected-item-class="demo1-item-selected"
            >
            <span>申请时间</span>
            <checker-item  v-for="(i, index) in checklist01" :key="i" :value="i" @on-item-click="timesort(index)">{{i}}</checker-item>
          </checker>
          <checker
            v-model="demo2"
            default-item-class="demo2-item"
            selected-item-class="demo2-item-selected"
            >
            <span>申请金额</span>
            <checker-item  v-for="(i, index) in checklist01" :key="i" :value="i" @on-item-click="moneysort(index)">{{i}}</checker-item>
          </checker>
          <checker
            v-model="demo3"
            default-item-class="demo3-item"
            selected-item-class="demo3-item-selected"
            >
            <span> 申请期限</span>
            <checker-item  v-for="(i, index) in checklist01" :key="i" :value="i" @on-item-click="deadlinesort(index)">{{i}}</checker-item>
          </checker>
          <div class="clear"></div>
          <div class="sortsoult"><span :class="{sortactive:colorshow}" @click="soult">确认</span><span @click="cancel">取消</span></div>
        </div>
       </div>
    </div>
    <div class="backcolor" v-show="show03" @click="back"></div>
    <div v-transfer-dom class="popup-client">
      <popup v-model="show01" position="top" max-height="50%">
        <group>
          <cell v-for="(i, index) in chooselist01" :key="index">
            <div @click="brand(i, index)">{{i}}</div>
          </cell>
        </group>
      </popup>
    </div>
    <div v-transfer-dom class="popup-client">
      <popup v-model="show02" position="top" max-height="50%">
        <group>
          <cell v-for="(i, index) in chooselist02" :key="index">
            <div @click="state(i,index)">{{i}}</div>
          </cell>
        </group>
      </popup>
    </div>
    <div v-transfer-dom class="popup-client">
      <popup v-model="show04" position="top" max-height="50%">
        <group>
          <cell v-for="(i, index) in chooselist04" :key="index">
            <div @click="money(i,index)">{{i}}</div>
          </cell>
        </group>
      </popup>
    </div>
    <scroller lock-x scrollbar-y use-pullup  @on-pullup-loading="loadMore" v-model="status" ref="scroller">
      <div class="box2 scroller-top" >
        <client-data  v-for="(item, index) in clientlist"  :key="index"  :i="item"></client-data>
      </div>
      <div slot="pullup" class="xs-plugin-pullup-container xs-plugin-pullup-up" style="position: absolute; width: 100%; height: 40px; bottom: -40px; text-align: center;">
        <span v-show="status.pullupStatus === 'default'"></span>
        <span class="pullup-arrow" v-show="status.pullupStatus === 'up'" :class="{'rotate': status.pullupStatus === 'up'}">松开加载</span>
        <span v-show="status.pullupStatus === 'loading'"><spinner type="ios-small"></spinner></span>
      </div>
    </scroller>
  </div>
</template>
<script>
var timeStamp = String(Number(new Date()))
import { TransferDom, Popup, Group, Cell, Checker, CheckerItem, Scroller, Spinner } from 'vux'
import api from '../api'
import utils from '../utils'
import ClientData from '../components/ClientData'
export default {
  directives: {
    TransferDom
  },
  data () {
    return {
      clientlist: [],
      showlist: [],
      show01: false,
      show02: false,
      show03: false,
      show04: false,
      colorshow: true,
      lengthshow: false,
      checklist01: ['默认', '降序', '升序'],
      demo1: '默认',
      demo2: '默认',
      demo3: '默认',
      index01: 0,
      index02: 0,
      index03: 0,
      dealloan: '品牌',
      loantime: '状态',
      changetimes: '排序',
      publishtime: '金额',
      chooselist01: ['全部'],
      chooselist02: ['全部', '资料填写中', '申请中', '审批中', '待签约', '已拒绝', '签约确认中', '已放弃', '待放款', '放款中', '还款中', '已完成', '逾期'],
      chooselist03: ['全部', '1万以下', '1-5万', '5-20万', '20万以上'],
      chooselist04: ['全部', '1万以下', '1-5万', '5-20万', '20万以上'],
      partneridList: [],
      tokenval: '',
      PageNum: 100, // 记录每页数
      partnerid: '', // 合作方Id
      clientStatus: '', // 状态
      clientAmount: '', // 金额
      count: 1, // 记录每页数
      pullupEnabled: true,
      status: {
        pullupStatus: 'default',
        pulldownStatus: 'default'
      }
    }
  },
  components: {
    Popup,
    Group,
    Cell,
    Checker,
    CheckerItem,
    Scroller,
    Spinner,
    ClientData
  },
  created () {
    window.document.title = '客户列表'
    this.tokenval = utils.AuthToken(timeStamp, this.$store.state.userkey)
    var params = {
      page: 1,
      perPage: '',
      partnerType: '-1'
    }
    api.creditloan(params).then(res => {
      console.log(res)
      if (res.status === 200) {
        var arry = []
        var arryList = []
        arry = res.data.list
        for (var i in arry) {
          this.chooselist01.push(arry[i].partnerName)
          arryList.push(arry[i].partnerId)
        }
        this.partneridList = this.partneridList.concat(arryList)
      }
    })
    this.apiClient(this.PageNum, this.partnerid, this.clientStatus, this.clientAmount)
    utils.jssdkwx(api, this.$wechat, this.$store)
  },
  methods: {
    apiClient (PageNum, partnerid, clientStatus, clientAmount) {
      var params = {
        Tokenuser: this.tokenval,
        userid: this.$store.state.userID,
        timestamp: timeStamp,
        page: 1,
        perPage: PageNum,
        partnerId: partnerid,
        commonStatus: clientStatus,
        amount: clientAmount,
        applyCnt: ''
      }
      api.client(params).then(res => {
        console.log(res)
        if (res.status === '200') {
          this.clientlist = res.data.list
        }
      })
    },
    loadMore () {
      this.count ++
      this.PageNum = this.count * 10 + 100
      this.$vux.loading.show({
        text: '加载更多'
      })
      setTimeout(() => {
        this.apiClient(this.PageNum, this.partnerid, this.clientStatus, this.clientAmount)
        setTimeout(() => {
          this.$refs.scroller.donePullup()
        }, 10)
      }, 2000)
    },
    back () {
      this.show03 = !this.show03
    },
    downfirst () {
      this.show01 = !this.show01
      this.show02 = false
      this.show03 = false
      this.show04 = false
    },
    downsecond () {
      this.show02 = !this.show02
      this.show01 = false
      this.show03 = false
      this.show04 = false
    },
    downthird () {
      this.show03 = !this.show03
      this.show02 = false
      this.show01 = false
      this.show04 = false
      var paramsort = {
        Tokenuser: this.tokenval,
        userid: this.$store.state.userID,
        timestamp: timeStamp,
        page: 1,
        perPage: 20,
        partnerId: this.partnerid,
        commonStatus: this.clientStatus,
        amount: this.clientAmount,
        applyCnt: ''
      }
      api.client(paramsort).then(res => {
        if (res.status === '200') {
          this.showlist = res.data.list
        }
      })
    },
    downfour () {
      this.show04 = !this.show04
      this.show02 = false
      this.show03 = false
      this.show01 = false
    },
    // 排序
    // 申请时间排序
    timesort (index) {
      this.index01 = index
      this.index02 = 0
      this.index03 = 0
      this.demo2 = '默认'
      this.demo3 = '默认'
    },
    // 申请金额排序
    moneysort (index) {
      this.index02 = index
      this.index01 = 0
      this.index03 = 0
      this.demo1 = '默认'
      this.demo3 = '默认'
    },
    // 申请期限排序
    deadlinesort (index) {
      this.index03 = index
      this.index01 = 0
      this.index02 = 0
      this.demo1 = '默认'
      this.demo2 = '默认'
    },
    // 排序结果
    soult () {
      this.show03 = false
      this.clientlist = []
      function smallBig (a, b) {
        return a - b
      }
      function bigSmall (a, b) {
        return b - a
      }
      if (this.index01 === 0 && this.index02 === 0 && this.index03 === 0) {
        for (var i in this.showlist) {
          this.clientlist.push(this.showlist[i])
        }
      } else if (this.index01 === 1) {
        this.clientlist = this.timefunction(smallBig)
      } else if (this.index01 === 2) {
        this.clientlist = this.timefunction(bigSmall)
      } else if (this.index02 === 1) {
        this.clientlist = this.moneyfunction(bigSmall)
      } else if (this.index02 === 2) {
        this.clientlist = this.moneyfunction(smallBig)
      } else if (this.index03 === 1) {
        this.clientlist = this.datefunction(bigSmall)
      } else if (this.index03 === 2) {
        this.clientlist = this.datefunction(smallBig)
      }
    },
    timefunction (sortval) {
      var numberlist = []
      this.clientlist = []
      var array = []
      var now = new Date().getTime()
      var difference
      var number
      for (var a = 0; a < this.showlist.length; a++) {
        difference = now - new Date(this.showlist[a].applyTerm).getTime()
        numberlist.push(difference)
      }
      numberlist.sort(sortval)
      for (var b = 0; b < numberlist.length; b++) {
        for (var d = 0; d < this.showlist.length; d++) {
          number = now - new Date(this.showlist[d].applyTerm).getTime()
          if (number === numberlist[b]) {
            array.push(this.showlist[d])
          }
        }
      }
      return array
    },
    moneyfunction (sortval) {
      var numberlist = []
      this.clientlist = []
      var array = []
      for (var a = 0; a < this.showlist.length; a++) {
        numberlist.push(this.showlist[a].applyBalance)
      }
      numberlist.sort(sortval)
      for (var b = 0; b < numberlist.length; b++) {
        for (var d = 0; d < this.showlist.length; d++) {
          if (this.showlist[d].applyBalance === numberlist[b] && this.showlist[d].applyBalance !== undefined) {
            array.push(this.showlist[d])
          }
        }
      }
      return array
    },
    datefunction (sortval) {
      var numberlist = []
      this.clientlist = []
      var array = []
      for (var a = 0; a < this.showlist.length; a++) {
        numberlist.push(this.showlist[a].applyTime)
      }
      numberlist.sort(sortval)
      for (var b = 0; b < numberlist.length; b++) {
        for (var d = 0; d < this.showlist.length; d++) {
          if (this.showlist[d].applyTime === numberlist[b] && this.showlist[d].applyTime !== undefined) {
            array.push(this.showlist[d])
          }
        }
      }
      return array
    },
    cancel () {
      this.show03 = false
    },
    // 品牌
    brand (val, index) {
      this.dealloan = val
      this.show01 = !this.show01
      this.clientlist = []
      if (index === 0) {
        this.partnerid = ''
        this.clientStatus = ''
        this.clientAmount = ''
        this.loantime = '状态'
        this.publishtime = '金额'
      } else {
        this.partnerid = this.partneridList[index - 1]
      }
      this.apiClient(this.PageNum, this.partnerid, this.clientStatus, this.clientAmount)
    },
    // 状态
    state (val, index) {
      this.loantime = val
      this.show02 = !this.show02
      this.clientlist = []
      if (index === 0) {
        this.clientStatus = '其他'
      } else if (index === 1) {
        this.clientStatus = 0
      } else if (index <= 9 && index > 1) {
        this.clientStatus = 10 + (index - 2)
      } else {
        this.clientStatus = 90 + index
      }
      this.apiClient(this.PageNum, this.partnerid, this.clientStatus, this.clientAmount)
    },
    // 金额
    money (val, index) {
      this.publishtime = val
      this.show04 = !this.show04
      this.clientlist = []
      this.clientAmount = index
      this.apiClient(this.PageNum, this.partnerid, this.clientStatus, this.clientAmount)
    }
  }
}
</script>
